<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超图EPSG：4524坐标系</title>
    <script src="../lib/ol6.4.3/ol.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <script src="../lib/iclient-openlayers.js"></script>
    <link rel="stylesheet" href="../css/ol6.4.3/ol.css">
    <link rel='stylesheet' href='../css/main.css'>
</head>
<body>
<div id='map'></div>
<script>
    const resolutions = [
        305.4058451866904,
        152.7029225933452,
        76.3514612966726,
        38.1757306483363,
        19.08786532416815,
        9.543932662084075,
        4.771966331042037,
        2.3859831655210186,
        1.1929915827605093,
        0.5964957913802547,
        0.29824789563224957,
        0.14912394781612479
    ];
    proj4.defs('EPSG:4524', '+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=GRS80 +units=m +no_defs');
    proj4.defs('EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs');

    const extent = [36106298.84, 3377509.73, 36135932.68, 3399559.1];
    const projection = new ol.proj.Projection({
        code: 'EPSG:4524',
        extent: extent,
        units: 'm',
        getPointResolution: function (resolution, point) {
            console.log(resolution);
            return resolution;
        }
    });
    // const projection = ol.proj.get('EPSG:4326');
    console.log(projection);
    // console.log(ol.proj.get('EPSG:4524'));
    const projectionExtent = projection.getExtent();
    console.log(projectionExtent);

    // let origin = ol.extent.getTopLeft(projectionExtent);
    let origin = ol.extent.getTopRight(projectionExtent);

    const tileGrid = new ol.tilegrid.TileGrid({
        // origin: [3512836.601473203,3.642785664211328E7],
        origin: [36106298.84, 3399559.1],
        // origin: [0, 0],
        resolutions: resolutions,
        extent: projectionExtent
    });
    const center = [104.0541, 30.4274];

    const result = proj4('EPSG:4326', 'EPSG:4524', center);

    console.log(result);


    const url = `http://10.14.216.10:8290/iserver/services/map-agscachev2-Layers/rest/maps/Layers`;
    // debugger;
    const map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.TileSuperMapRest({
                    name: '重庆广阳岛',
                    url,
                    tileGrid
                }),
                projection: projection
            })
        ],
        target: 'map',
        view: new ol.View({
            center: result,
            projection: projection,
            zoom: 5,
            maxZoom: 11,
            minZoom: 1,
            resolutions: resolutions
        })
    });
</script>
</body>
</html>